.main-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    .flex-box {
        flex: 1 1 0%;
        padding: 30px;
        position: relative;
    }
    .main-left {
        background-color: $common-greyblue-color;
        .name {
            display: flex;
            align-items: center;
            height: 60px;
            @include border-radius(5px);
            color: $common-white-color;
            font-size: 26px;
        }
        .img-content {
            height: calc(100% - 60px);
        }
        .el-image {
            width: 400px;
            height: 400px;
        }
    }
    .main-right {
        background-color: $bg-grey-color;
        .operate-center {
            position: relative;
            box-shadow: 0 15px 30px rgba(0,0,0,0.15),0 10px 10px rgba(0,0,0,0.15);
            opacity: 0.9;
            border-radius: 10px;
            overflow: hidden;
            width: 750px;
            max-width: 100%;
            margin: 10px;
            min-height: 450px;
            button {
                border-radius: 2em;
                border: none;
                background: $button-red-color;
                // background: #4FDAC1;
                color: #ffffff;
                font-size: 16px !important;
                font-weight: 700;
                padding: 12px 45px;
                letter-spacing: 2px;
                font-family: MKWXY;
            }
            button:hover {
                animation: jello-horizontal 0.9s both;
            }
            h1 {
                margin: 20px 0;
                letter-spacing: 2px;
            }
            .form-container {
                position: absolute;
                height: 100%;
                transition: all .5s ease-in-out;
                .center-box {
                    background: $common-white-color;
                    flex-direction: column;
                    padding: 0 20px;
                    height: 100%;
                    form {
                        width: 100% !important;
                    }
                    button {
                        height: 45px !important;
                        padding: 12px 46px;
                    }
                }
            }
            .register-container {
                left:0;
                width:50%;
                opacity: 0;
                .code-item button{
                    padding: 0px 20px !important;
                    height: 40px !important;
                    width: 70px !important;
                    @include border-radius-all(0,4px,4px,0);
                }
            }
            .register-container-active {
                transform: translateX(100%);
                opacity: 1;
            }
            .login-container {
                left:0;
                width: 50%;
                p {
                    margin: 15px 0;
                    cursor: pointer;
                    transition: all .3s;
                }
                p:hover {
                    color: $button-red-color;
                    text-decoration: underline;
                }
            }
            .login-container-active {
                opacity: 0;
                transform: translateY(100%);
            }
            .overlay-container {
                position: absolute;
                left: 50%;
                width: 50%;
                height: 100%;
                overflow: hidden;
                transition: all .5s ease-in-out;
                .overlay-box {
                    background: linear-gradient(90deg,#ff4b2b,#ff416c);
                    // background: linear-gradient(90deg,#5CB3CC,#4FDAC1);
                    // background: linear-gradient(90deg, #60DADC, #75CADF);
                    color: $common-white-color;
                    position: relative;
                    left: -100%;
                    height: 100%;
                    width: 200%;
                    transition: all .5s ease-in-out;
                    .overlay-left {
                        transform: translateY(-20%);
                    }
                    .overlay-left-active { // 左右滑动的同时，带点上下滑动效果
                        transform: translateY(0%);
                    }
                    .overlay-panel {
                        position: absolute;
                        top: 0;
                        flex-direction: column;
                        height: 100%;
                        width: 50%;
                        transition: all .5s ease-in-out;
                        p {
                            margin: 20px 0 30px 0;
                        }
                        .overlay-btn {
                            cursor: pointer;
                            background: transparent;
                            border: 1px solid $common-white-color;
                        }
                    }
                }
                .overlay-box-active {
                    transform: translateX(50%);
                }
                .overlay-right {
                    right: 0;
                    transform: translateY(0);
                }
                .overlay-right-active { // 左右滑动的同时，带点上下滑动效果
                    transform: translateY(-20%);
                }
            }
            .overlay-container-active {
                transform: translateX(-100%);
            }
              
        }
    }
}